<template>
	<view style="background-color: #F2F2F2; padding: 0 20rpx;">
		<view class="banner-box">
			<u-swiper
					:list="bannerList"
					keyName="image"
					
					indicator
					indicatorMode="line"
					circular
			></u-swiper>
		</view>
		
		<view class="category-box">
			<u-grid 
				:col="categoryList.length" 
				@click="clickCategory"
			>
				<u-grid-item 
						v-for="category in categoryList" 
						:key="category.id"
				>
					<u-icon 
							:label="category.title" 
							labelPos="bottom" 
							:name="category.icon" 
							:size="30"
							:labelSize="14"
							:labelColor="black"
					></u-icon>
				</u-grid-item>
			</u-grid>
		</view>
		
		<view class="top-post-box">
			<u-list :height="240">
				<u-list-item
						v-for="topPost in topPostList"
						:key="topPost.id"
				>
					<view class="top-post-item">
						<view class="level-1">
							<navigator :url="'/pages/detail/detail?pid='+topPost.id">
								<text>{{topPost.title}}</text>
							</navigator>
							<u-tag :text="topPost.category.title"></u-tag>
						</view>
						<view class="level-2">
							<view class="top-post-tag-item" 
									v-for="tag in topPost.tags" 
									:key="tag.id"
							>
								<u-tag :text="tag.name" plain shape="circle"></u-tag>
							</view>
						</view>
						<view class="level-3">
							<text>{{topPost.user.name + '发布于' + topPost.createTime}}</text>
							<u-icon :label="topPost.readCount" name="eye"></u-icon>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		
		<view class="tab-box">
			<u-sticky>
				<u-tabs :list="categoryList" keyName="title" @click="clickTab"></u-tabs>
			</u-sticky>
		</view>
		<view class="latest-post-box">
			<u-list :height="240">
				<u-list-item
						v-for="latestPost in latestPostList"
						:key="latestPost.id"
				>
					<view class="post-item">
						<view class="level-1">
							<navigator :url="'/pages/detail/detail?pid='+latestPost.id">
								<text>{{latestPost.title}}</text>
							</navigator>
							<u-tag :text="latestPost.category.title"></u-tag>
						</view>
						<view class="level-2">
							<view class="post-tag-item"
									v-for="tag in latestPost.tags" 
									:key="tag.id"
							>
								<u-tag :text="tag.name" plain shape="circle"></u-tag>
							</view>
						</view>
						<view class="level-3">
							<text>{{latestPost.user.name + '发布于' + latestPost.createTime}}</text>
							<u-icon :label="latestPost.readCount" name="eye"></u-icon>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		
		<!-- <navigator :url="'/pages/publish/publish?category='+encodeURIComponent(JSON.stringify(categoryList[0]))">发帖 招聘</navigator> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList: [
					{
						id: '1',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png'
					},
					{
						id: '2',
						image: 'https://static.wangsu123.cn/article/image/20220322/14a401b3a099e4f36dd733a2fa0bc0a9.png'
					}
				],
				
				categoryList: [
					{
						id: '1',
						title: '招聘求职',
						icon: 'home'
					},
					{
						id: '2',
						title: '房屋出租',
						icon: 'home',
					},
					{
						id: '3',
						title: '二手物品',
						icon: 'home',
					}
				],
				
				topPostList: [
					{
						id: '101',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个保安，月1800 996，包吃包住',
						tags: [
							{ id: '1', name: '保安' },
							{ id: '2', name: '包吃' },
							{ id: '3', name: '包住' },
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 100,
					},
					{
						id: '102',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '服务员' },
							{ id: '2', name: '包吃' },
							{ id: '3', name: '包住' },
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					}
				],
				
				latestPostList: [
					{
						id: '101',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个保安，月1800 996，包吃包住',
						tags: [
							{ id: '1', name: '保安' },
							{ id: '2', name: '包吃' },
							{ id: '3', name: '包住' },
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 100,
					},
					{
						id: '102',
						category: {
							id: '1',
							title: '招聘求职'
						},
						title: '招聘一个服务员，月3800 966，包吃包住',
						tags: [
							{ id: '1', name: '服务员' },
							{ id: '2', name: '包吃' },
							{ id: '3', name: '包住' },
						],
						user: {
							id: '1',
							name: '张三',
						},
						createTime: '2023-10-07',
						readCount: 200,
					}
				]
			}
		},
		methods: {
			clickCategory(index) {
				const id = this.categoryList[index].id
				uni.navigateTo({
					url: '/pages/category/category?cid='+id
				})
			},
			clickPost(id) {
				uni.navigateTo({
					url: '/pages/detail/detail?pid='+id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.banner-box {
		margin: 0 0 20rpx 0;
	}
	.category-box {
		margin: 20rpx 0;
		background-color: #FFF;
		padding: 15rpx;
		
		border-radius: 30rpx;
	}
	.top-post-box {
		margin: 20rpx 0;
		background-color: #FFF;
		padding: 15rpx;
		
		.top-post-item {
			margin-bottom: 40rpx;
			.level-1 {
				display: flex;
				justify-content: space-between;
				margin-bottom: 15rpx;
			}
			.level-2 {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				margin-bottom: 15rpx;
				.top-post-tag-item { margin-right: 20rpx; }
			}
			.level-3 {
				font-size: $uni-font-size-base;
				color: gray;
				
				display: flex;
				justify-content: space-between;
			}
		}
	}
	
	.tab-box {
		background-color: #FFF;
		padding: 0 15rpx;
	}
	.latest-post-box {
		background-color: #FFF;
		padding: 15rpx;
		.post-item {
			margin-bottom: 40rpx;
			.level-1 {
				display: flex;
				justify-content: space-between;
				margin-bottom: 15rpx;
			}
			.level-2 {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				align-items: center;
				margin-bottom: 15rpx;
				.top-post-tag-item { margin-right: 20rpx; }
			}
			.level-3 {
				font-size: $uni-font-size-base;
				color: gray;
				
				display: flex;
				justify-content: space-between;
			}
		}
	}
</style>
